---
title: API de la barre d'outils de développement
i18nReady: true
---
import Since from '~/components/Since.astro';
import RecipeLinks from "~/components/RecipeLinks.astro";

L'API de la barre d'outils de développement d'Astro vous permet de créer des [intégrations Astro](/fr/reference/integrations-reference/) qui ajoutent des applications à la barre d'outils de développement d'Astro. Cela vous permet d'ajouter de nouvelles fonctionnalités et des intégrations avec des services tiers.

<RecipeLinks slugs={["fr/recipes/making-toolbar-apps"]} />

## Configuration d'une intégration d'applications pour la barre d'outils

Les intégrations peuvent ajouter des applications à la barre d'outils de développement dans [le hook `astro:config:setup`](/fr/reference/integrations-reference/#astroconfigsetup).

```ts title="mon-integration.js" {8-13}
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "mon-integration",
  hooks: {
    "astro:config:setup": ({ addDevToolbarApp }) => {
      addDevToolbarApp({
        id: "mon-appli",
        name: "Mon appli",
        icon: "<svg>...</svg>",
        entrypoint: "./mon-appli.js",
      });
    },
  },
});
```

### `addDevToolbarApp()`

<p>

**Type :** `(entrypoint: DevToolbarAppEntry) => void`<br />
<Since v="4.0.0" />
</p>

Une fonction disponible pour [le hook `astro:config:setup`](/fr/reference/integrations-reference/#astroconfigsetup) qui ajoute des applications à la barre d'outils de développement. Elle accepte un objet avec les propriétés requises suivantes pour définir l'application de barre d'outils : [`id`](#id), [`name`](#name) et [`entrypoint`](#entrypoint). En option, vous pouvez également définir une [`icône`](#icon) pour votre application.

### `id`

<p>

**Type :** `string`
</p>

Un identifiant unique pour l'application. Il sera utilisé pour identifier l'application de manière unique dans les hooks et les événements.

```ts title="mon-integration.js" {2}
{
  id: 'mon-appli',
  // ...
}
```

### `name`

<p>

**Type :** `string`
</p>

Le nom de l'application. Il sera affiché aux utilisateurs chaque fois que l'application devra être référencée à l'aide d'un nom lisible par l'humain.

```ts title="mon-integration.js" {3}
{
  // ...
  name: 'Mon appli',
  // ...
}
```

### `icon`

<p>

**Type :** <code><a href="#icônes">Icon</a> | string</code><br />
**Par défaut :** `"?"`
</p>

L'icône utilisée pour afficher l'application dans la barre d'outils. Il peut s'agir d'une icône de [la liste des icônes](#icônes), ou d'une chaîne de caractères contenant le balisage SVG de l'icône.

```ts title="mon-integration.js" {3}
{
  // ...
  icon: '<svg>...</svg>', // ou, par exemple, 'astro:logo'
  // ...
}
```

### `entrypoint`

<p>

**Type :** `string | URL`
</p>

Chemin d'accès au fichier qui exporte l'application de la barre d'outils de développement.

```ts title="mon-integration.js" {3}
{
  // ...
  entrypoint: './mon-appli.js',
}
```

<p><Since v="5.0.0" /></p>

La fonction accepte également une `URL` comme point d'entrée (`entrypoint`) :


```ts title="mon-integration.js" "new URL("./mon-appli.js", import.meta.url)"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "mon-integration",
  hooks: {
    "astro:config:setup": ({ addDevToolbarApp }) => {
      addDevToolbarApp({
        id: "mon-appli",
        name: "Mon Appli",
        icon: "<svg>...</svg>",
        entrypoint: new URL("./mon-appli.js", import.meta.url),
      });
    },
  },
});
```

## Structure d'une application pour la barre d'outils de développement

Une application de barre d'outils de développement est un fichier `.js` ou `.ts` qui exporte par défaut un objet en utilisant la [fonction `defineToolbarApp()`](#definetoolbarapp) disponible dans le module `astro/toolbar`.

```ts title="src/mon-appli.js"
import { defineToolbarApp } from "astro/toolbar";

export default defineToolbarApp({
  init(canvas) {
    const text = document.createTextNode('Hello World!');
    canvas.appendChild(text);
  },
  beforeTogglingOff() {
    const confirmation = window.confirm('Really exit?');
    return confirmation;
  } 
});
```
### `defineToolbarApp()`

<p>

**Type :** `(app: DevToolbarApp) => DevToolbarApp`
<Since v="4.7.0" />
</p>

Une fonction qui définit la logique de votre application de barre d'outils lorsqu'elle est chargée et désactivée.

Cette fonction prend un objet avec une fonction [`init()`](#init) qui sera appelée lorsque l'application de la barre d'outils sera chargée. Elle peut également prendre une fonction [`beforeTogglingOff()`](#beforetogglingoff) qui s'exécutera lorsque l'application de la barre d'outils sera cliquée pour désactiver son statut actif.

### `init()`

<p>

**Type :** `(canvas: ShadowRoot, app: ToolbarAppEventTarget, server: ToolbarServerHelpers) => void | Promise<void>`
</p>

Bien que cela ne soit pas obligatoire, la plupart des applications utiliseront cette fonction pour définir le comportement de base de l'application. Cette fonction ne sera appelée qu'une seule fois lors du chargement de l'application, soit lorsque le navigateur est inactif, soit lorsque l'utilisateur clique sur l'application dans l'interface utilisateur, selon ce qui se produit en premier.

La fonction reçoit trois arguments pour définir la logique de votre application : [`canvas`](#canvas) (pour afficher les éléments à l'écran), [`app`](#app) (pour envoyer et recevoir des événements côté client depuis la barre d'outils de développement), et [`server`](#server) (pour communiquer avec le serveur).

#### `canvas`

<p>

**Type :** `ShadowRoot`
</p>

Une interface [ShadowRoot](https://developer.mozilla.org/fr/docs/Web/API/ShadowRoot) standard que l'application peut utiliser pour afficher son interface utilisateur. Les éléments peuvent être créés et ajoutés au ShadowRoot à l'aide des API DOM standard.

Chaque application reçoit son propre ShadowRoot dédié pour le rendu de son interface utilisateur. De plus, l'élément parent est positionné en utilisant `position: absolute;` afin que l'interface utilisateur de l'application n'affecte pas la mise en page d'une page Astro.

```ts title="src/mon-appli.js" {3}
export default defineToolbarApp({
	init(canvas) {
    canvas.appendChild(document.createTextNode('Hello World!'))
  }
});
```

#### `app`

<p>

**Type :** `ToolbarAppEventTarget`<br />
<Since v="4.7.0" />
</p>

Une interface [`EventTarget`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget) standard avec quelques [aides supplémentaires pour les événements côté client](#sur-le-client) qui peuvent être utilisées pour envoyer et recevoir des événements depuis la barre d'outils de développement.

```ts title="src/mon-appli.js" {3-8}
export default defineToolbarApp({
  init(canvas, app) {
    app.onToggled(({ state }) => {
      const text = document.createTextNode(
        `Cette application est ${state ? "activée" : "désactivée"} !`,
      );
      canvas.appendChild(text);
    });
  },
});
```

#### `server`

<p>

**Type :** `ToolbarServerHelpers`<br />
<Since v="4.7.0" />
</p>

Un objet qui peut être utilisé pour [communiquer avec le serveur](#communication-client-serveur).

```ts title="src/mon-appli.js" {3-7}
export default defineToolbarApp({
  init(canvas, app, server) {
    server.send('mon-message', { message: 'Bonjour !' });

    server.on('message-du-serveur', (data) => {
      console.log(data.message);
    });
  },
});
```

### `beforeTogglingOff()`

<p>

**Type :** `(canvas: ShadowRoot) => boolean | Promise<boolean>`<br />
<Since v="4.7.0" />
</p>

Cette fonction facultative est appelée lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour la désactiver. Cette fonction peut être utilisée, par exemple, pour effectuer des opérations de nettoyage ou pour demander à l'utilisateur une confirmation avant de désactiver l'application.

Si une valeur fausse est renvoyée, la désactivation sera annulée et l'application restera activée.

```ts title="src/mon-appli.js" {3-6}
export default defineToolbarApp({
  // ...
  beforeTogglingOff() {
    const confirmation = window.confirm('Êtes-vous sûr de vouloir désactiver cette application ?');
    return confirmation;
  }
});
```

#### canvas

<p>

**Type :** `ShadowRoot`
</p>

Le ShadowRoot de l'application, peut être utilisé pour afficher toute interface utilisateur nécessaire avant la fermeture. Identique à l'argument [`canvas` de la fonction `init`](#canvas).

## Événements côté client

En plus des méthodes standards d'une interface `EventTarget` ([`addEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget), [`dispatchEvent`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/dispatchEvent), [`removeEventListener`](https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener), etc.), l'objet [`app`](#app) possède aussi les méthodes suivantes :

### `onToggled()`

<p>

**Type :** `(callback: (options: {state: boolean})) => void`<br />
<Since v="4.7.0" />
</p>

Enregistre une fonction de rappel à exécuter lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour activer ou désactiver l'application.

```ts title="src/mon-appli.js"
app.onToggled((options) => {
  console.log(`L'application est maintenant ${options.state ? 'activée' : 'désactivée'} !`);
});
```

### `onToolbarPlacementUpdated()`

<p>

**Type :** `(callback: (options: {placement: 'bottom-left' | 'bottom-center' | 'bottom-right'})) => void`<br />
<Since v="4.7.0" />
</p>

Cet événement est déclenché lorsque l'utilisateur modifie l'emplacement de la barre d'outils de développement. Il peut, par exemple, être utilisé pour repositionner l'interface utilisateur de l'application lorsque la barre d'outils est déplacée.

```ts title="src/mon-appli.js"
app.onToolbarPlacementUpdated((options) => {
  console.log(`La barre d'outils est maintenant placée à ${options.placement}!`);
});
```

### `toggleState()`

<p>

**Type :** `(options: {state: boolean}) => void`<br />
<Since v="4.7.0" />
</p>

Modifie l'état de l'application. Cela peut être utilisé pour activer ou désactiver l'application de manière programmatique, par exemple, lorsque l'utilisateur clique sur un bouton dans l'interface utilisateur de l'application.

```ts title="src/mon-appli.js"
app.toggleState({ state: false });
```

### `toggleNotification()`

<p>

**Type :** `(options: {state?: boolean, level?: 'error' | 'warning' | 'info'}) => void`<br />
<Since v="4.7.0" />
</p>

Permet d'afficher une notification sur l'icône de l'application. Elle peut être utilisée pour informer l'utilisateur que l'application requiert son attention ou pour supprimer la notification en cours.

```ts title="src/mon-appli.js"
app.toggleNotification({
  state: true,
  level: 'warning',
});
```

#### `state`

<p>

**Type :** `boolean`
</p>

Indique si l'application dispose ou non d'une notification pour l'utilisateur. Lorsque la valeur est `true`, l'icône de l'application sera mise en évidence. À l’inverse, lorsque la valeur est `false`, la mise en évidence sera supprimée. Si cette propriété n'est pas spécifiée, la valeur `true` sera supposée.

#### `level`

<p>

**Type :** `'error' | 'warning' | 'info'`<br />
**Par défaut :** `'error'`
</p>

Indique le niveau de la notification. Il sera utilisé pour déterminer la couleur et la forme (cercle rose foncé, triangle doré ou carré bleu) de la mise en évidence sur l'icône de l'application. Si cette propriété n'est pas spécifiée, la valeur `'error'` sera supposée.

## Communication client-serveur

En utilisant les [méthodes de Vite pour la communication client-serveur](https://vite.dev/guide/api-plugin.html#client-server-communication), les applications de la barre d'outils de développement et le serveur peuvent communiquer entre eux. Afin de faciliter l'envoi et la réception de messages personnalisés, des méthodes d'aide sont fournies pour être utilisées à la fois dans votre application de barre d'outils (sur le client) et dans votre intégration (sur le serveur).

### Sur le client

Dans votre application, utilisez l'[objet `server` dans le hook `init()`](#server) pour envoyer et recevoir des messages vers et depuis le serveur.

```ts title="src/mon-appli.js" {3-7} "server" "serveur"
export default defineToolbarApp({
  init(canvas, app, server) {
    server.send('mon-message', { message: 'Bonjour !' });

    server.on('message-du-serveur', (data) => {
      console.log(data.message);
    });
  },
});
```

#### `send()`

<p>

**Type :** `<T>(event: string, payload: T) => void`<br />
<Since v="4.7.0" />
</p>

Envoie des données au serveur à partir de la logique définie dans l'application de la barre d'outils.

```ts title="src/mon-appli.js"
init(canvas, app, server) {
  server.send('mon-appli:mon-message', { message: 'Bonjour !' });
}
```

Lors de l'envoi de messages du client au serveur, il est conseillé de préfixer le nom de l'événement avec l'identifiant de l'application ou d'autres espaces de noms afin d'éviter les conflits avec d'autres applications ou d'autres intégrations qui pourraient être à l'écoute de messages.

#### `on()`

<p>

**Type :** `<T>(event: string, callback: (data: T) => void) => void`<br />
<Since v="4.7.0" />
</p>

Enregistre une fonction de rappel à exécuter lorsque le serveur envoie un message avec l'événement spécifié.

```ts title="src/mon-appli.js"
init(canvas, app, server) {
  server.on('message-du-serveur', (data) => {
    console.log(data.message);
  });
}
```

### Sur le serveur

Dans une intégration, telle que [l'intégration qui ajoute votre application de barre d'outils](#configuration-dune-intégration-dapplications-pour-la-barre-doutils), utilisez le [hook `astro:server:setup`](/fr/reference/integrations-reference/#astroserversetup) pour accéder à l'objet `toolbar` afin d'envoyer et de recevoir des messages vers et à partir de vos applications.

```ts title="mon-integration.js" {5}
export default () => ({
  name: "mon-integration",
  hooks: {
    "astro:config:setup": ({ addDevToolbarApp }) => {},
    "astro:server:setup": ({ toolbar }) => {},
  },
});
```

#### `send()`

<p>

**Type :** `<T>(event: string, payload: T) => void`<br />
<Since v="4.7.0" />
</p>

Envoie des données au client.

```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
  toolbar.send('message-du-serveur', { message: 'Bonjour !' });
},
```

#### `on()`

<p>

**Type :** `<T>(event: string, callback: (data: T) => void) => void`<br />
<Since v="4.7.0" />
</p>

Enregistre une fonction de rappel à exécuter lorsque le client enverra un message avec l'événement spécifié.

```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
  toolbar.on('mon-appli:mon-message', (data) => {
    console.log(data.message);
  });
},
```

#### `onAppInitialized()`

<p>

**Type :** `(appId: string, callback: () => void) => void`<br />
<Since v="4.7.0" />
</p>

Enregistre une fonction de rappel à exécuter lors de l'initialisation de l'application.

```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
  toolbar.onAppInitialized('mon-appli', () => {
    console.log("L'application est maintenant initialisée !");
  });
},
```

:::note
L'événement intégré `connection` de Vite se déclenche **avant** que les applications de la barre d'outils de développement ne soient initialisées et ne peut donc pas être utilisé directement par les applications. Utilisez la méthode `onAppInitialized` pour vous assurer que l'application est complètement initialisée avant de lui envoyer des messages.
:::

#### `onAppToggled()`

<p>

**Type :** `(appId: string, callback: (options: {state: boolean}) => void) => void`<br />
<Since v="4.7.0" />
</p>

Enregistre une fonction de rappel à exécuter lorsque l'utilisateur clique sur l'icône de l'application dans l'interface utilisateur pour activer ou désactiver l'application.

```ts title="mon-integration.js"
'astro:server:setup': ({ toolbar }) => {
  toolbar.onAppToggled('mon-appli', ({ state }) => {
    console.log(`L'application est maintenant ${state ? 'activée' : 'désactivée'} !`);
  });
},
```

## Bibliothèque de composants

La barre d'outils de développement comprend un ensemble de composants web qui peuvent être utilisés pour créer des applications avec une apparence et une convivialité cohérentes.

### `astro-dev-toolbar-window`

Affiche une fenêtre.

Le slot du composant sera utilisé comme contenu de la fenêtre.

```html
<astro-dev-toolbar-window>
  <p>Mon contenu</p>
</astro-dev-toolbar-window>
```

Lors de la création d'une fenêtre à l'aide de JavaScript, le contenu des slots doit être placé à l'intérieur du DOM allégé du composant.

```js
const myWindow = document.createElement('astro-dev-toolbar-window');
const myContent = document.createElement('p');
myContent.textContent = 'Mon contenu';

// utilise appendChild directement sur `window`, et non sur `myWindow.shadowRoot`
myWindow.appendChild(myContent);
```

### `astro-dev-toolbar-button`

Affiche un bouton.

Le slot du composant sera utilisé comme contenu du bouton.

```js
const myButton = document.createElement('astro-dev-toolbar-button');
myButton.textContent = 'Cliquez-moi !';
myButton.buttonStyle = "purple";
myButton.size = "medium";

myButton.addEventListener('click', () => {
  console.log('Cliqué !');
});
```

#### `size`

<p>

**Type :** `"small" | "medium" | "large"`<br />
**Par défaut :** `"small"`
</p>

La taille du bouton.

#### `button-style`

<p>

**Type :** `"ghost" | "outline" | "purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"purple"`
</p>

Le style du bouton. En utilisant `ghost`, le bouton lui-même est invisible et seul le contenu du bouton est affiché.

En JavaScript, définissez cette propriété en utilisant la propriété `buttonStyle` pour éviter tout conflit avec la propriété native `style`.

#### `button-border-radius`

<p>

**Type :** `"normal" | "rounded"`<br />
**Par défaut :** `"normal"`<br />
<Since v="4.8.0" />
</p>

Le rayon de la bordure du bouton. En utilisant `rounded`, le bouton aura des coins arrondis et un remplissage uniforme sur tous les côtés.

En JavaScript, définissez cette propriété à l'aide de la propriété `buttonBorderRadius`.

### `astro-dev-toolbar-badge`

Affiche un badge.

Le slot du composant sera utilisé comme contenu du badge.

```html
<astro-dev-toolbar-badge>Mon badge</astro-dev-toolbar-badge>
```

#### `size`

<p>

**Type :** `"small" | "large"`<br />
**Par défaut :** `"small"`
</p>

La taille du badge.

#### `badge-style`

<p>

**Type :** `"purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"purple"`
</p>

Le style (couleur) du badge.

En JavaScript, définissez cette propriété en utilisant la propriété `badgeStyle` pour éviter tout conflit avec la propriété native `style`.

### `astro-dev-toolbar-card`

Affiche une carte. Spécifiez un attribut `link` facultatif pour que la carte agisse comme un élément `<a>`.

Lors de la création d'une carte à l'aide de JavaScript, une propriété `clickAction` peut être spécifiée pour que la carte se comporte comme un élément `<button>`.

Le slot du composant sera utilisé comme contenu de la carte.

```html
<astro-dev-toolbar-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Signaler un problème</astro-dev-toolbar-card>
```

#### `card-style`

<p>

**Type :** `"purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"purple"`
</p>

Le style de la carte. La couleur n'est appliquée au bord de la carte qu'au survol.

En JavaScript, définissez cette propriété à l'aide de `cardStyle`.

### `astro-dev-toolbar-toggle`

Affiche un bouton à bascule, agissant comme une case à cocher. Cet élément est en interne une simple enveloppe autour de l'élément natif `<input type="checkbox">`. L'élément case à cocher est accessible à l'aide de la propriété `input`.

```ts
const toggle = document.createElement('astro-dev-toolbar-toggle');

toggle.input.addEventListener('change', (evt) => {
  console.log(`Le bouton à bascule est maintenant ${evt.currentTarget.checked ? 'activé' : 'désactivé'} !`);
});
```

#### `toggle-style`

<p>

**Type :** `"purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"gray"`
</p>

Le style du bouton à bascule.

En JavaScript, définissez cette propriété à l'aide de la propriété `toggleStyle`.

### `astro-dev-toolbar-radio-checkbox`

<p><Since v="4.8.0" /></p>

Affiche un bouton radio. Similaire au composant `astro-dev-toolbar-toggle`, cet élément est une simple enveloppe autour d'un élément natif `<input type="radio">`. L'élément radio est accessible à l'aide de la propriété `input`.

```ts
const radio = document.createElement('astro-dev-toolbar-radio-checkbox');

radio.input.addEventListener('change', (evt) => {
  console.log(`Le bouton radio est maintenant ${evt.currentTarget.checked ? 'activé' : 'désactivé'} !`);
});
```

#### `radio-style`

<p>

**Type :** `"purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"purple"`
</p>

Le style du bouton radio.

En JavaScript, définissez cette propriété à l'aide de la propriété `radioStyle`.

### `astro-dev-toolbar-highlight`

Peut être utilisé pour mettre en évidence un élément sur la page. Dans la plupart des cas, vous souhaiterez positionner et redimensionner cet élément à l'aide des propriétés CSS `top`, `left`, `width` et `height` pour le faire correspondre à l'élément que vous souhaitez mettre en évidence.

```html
<!-- Mise en évidence de la page entière -->
<astro-dev-toolbar-highlight style="top: 0; left: 0; width: 100%; height: 100%;"></astro-dev-toolbar-highlight>
```

```ts
const elementToHighlight = document.querySelector('h1');
const rect = elementToHighlight.getBoundingClientRect();

const highlight = document.createElement('astro-dev-toolbar-highlight');

highlight.style.top = `${Math.max(rect.top + window.scrollY - 10, 0)}px`;
highlight.style.left = `${Math.max(rect.left + window.scrollX - 10, 0)}px`;
highlight.style.width = `${rect.width + 15}px`;
highlight.style.height = `${rect.height + 15}px`;
highlight.icon = 'astro:logo';
```

#### `highlight-style`

<p>

**Type :** `"purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"purple"`
</p>

Le style de la mise en évidence.

#### `icon`

Une [icône](#icônes) à afficher dans le coin supérieur droit de la mise en évidence.

### `astro-dev-toolbar-tooltip`

Affiche une infobulle avec différentes sections. Ce composant est défini sur `display: none;` par défaut et peut être rendu visible en utilisant l'attribut `data-show="true"`.

Les sections sont définies à l'aide de la propriété `sections`. Cette propriété est un tableau d'objets ayant la forme suivante :

```ts
{
	title?: string; // Titre de la section
	inlineTitle?: string; // Titre de la section, affiché sur place à côté du titre
	icon?: Icon; // Icône de la section
	content?: string; // Contenu de la section
	clickAction?: () => void | Promise<void>; // Action à effectuer en cliquant sur la section
	clickDescription?: string; // Description de l'action à effectuer en cliquant sur la section
}
```

```ts
const tooltip = document.createElement('astro-dev-toolbar-tooltip');

tooltip.sections = [{
  title: 'Ma section',
  icon: 'astro:logo',
  content: 'Mon contenu',
  clickAction: () => {
    console.log('Cliqué !')
  },
  clickDescription: 'Cliquez-moi !'
}]
```

Ce composant est souvent combiné avec le composant `astro-dev-toolbar-highlight` pour afficher une infobulle au survol d'un élément mis en évidence :

```ts
const highlight = document.createElement('astro-dev-toolbar-highlight');

// Positionne la mise en évidence...

const tooltip = document.createElement('astro-dev-toolbar-tooltip');

// Ajoute des sections à l'infobulle...

highlight.addEventListener('mouseover', () => {
  tooltip.dataset.show = 'true';
});

highlight.addEventListener('mouseout', () => {
  tooltip.dataset.show = 'false';
});
```

### `astro-dev-toolbar-icon`

Affiche une icône. Une icône de [la liste des icônes](#icônes) peut être spécifiée en utilisant l'attribut `icon`, ou le balisage SVG d'une icône peut être passé en tant que slot.

```html
<astro-dev-toolbar-icon icon="astro:logo" />
```

```html
<astro-dev-toolbar-icon>
  <svg>...</svg>
</astro-dev-toolbar-icon>
```

### `astro-dev-toolbar-select`

<p>

<Since v="4.6.0" />
</p>

Affiche un élément de sélection. Similaire au composant `astro-dev-toolbar-toggle`, cet élément est une simple enveloppe autour d'un élément natif `<select>`. Utilisez la propriété `element` pour accéder à l'élément de sélection.

```ts
const mySelect = document.createElement("astro-dev-toolbar-select");
const options = [
  { label: "Première option", value: "premier" },
  { label: "Deuxième option", value: "deuxieme", isDefault: true },
];
const myOptions = options.map((option) => {
  const optionEl = document.createElement("option");
  optionEl.textContent = option.label;
  optionEl.setAttribute("value", option.value);
  optionEl.selected = option.isDefault || false;
  return optionEl;
});

mySelect.selectStyle = "green";
mySelect.append(...myOptions);

mySelect.element.addEventListener("change", (evt) => {
  if (evt.currentTarget instanceof HTMLSelectElement) {
    console.log(`La valeur sélectionnée est maintenant ${evt.currentTarget.value}!`);
  }
});
```

#### `select-style`

<p>

**Type :** `"purple" | "gray" | "red" | "green" | "yellow" | "blue"`<br />
**Par défaut :** `"gray"`
</p>

Le style de l'élément select.

En JavaScript, définissez cette propriété à l'aide de la propriété `selectStyle`.

#### Icônes

Les icônes suivantes sont actuellement disponibles et peuvent être utilisées dans tout composant acceptant une icône :

- `astro:logo`
- `warning`
- `arrow-down`
- `bug`
- `check-circle`
- `gear`
- `lightbulb`
- `file-search`
- `star`
- `checkmark`
- `dots-three`
- `copy`
- `compress`
- `grid`
- `puzzle`
- `approveUser`
- `checkCircle`
- `resizeImage`
- `searchFile`
- `image`
- `robot`
- `sitemap`
- `gauge`
- `person-arms-spread`
- `arrow-left`
- `houston-detective`

Toutes les icônes ci-dessus utilisent `fill="currentColor"` par défaut et héritent de la couleur de l'élément parent.
